<template>
	<view class="container">
		<view class="title">
		  <view class="font-36 text-bold c-base">商务宴请</view>
		  <view class="font-24 c-base">预定专属包间，宴请好友</view>
		  <image :src="$util.img('image/business.png')" mode="" class="icon"></image>
		</view>
		
		<view class="store-list">
			<view class="store-item" @click="goDetail(item)" v-for="(item,index) in list" :key="index">
				<image class="store-image" :src="$util.img(m)" mode="aspectFill" lazy-load v-for="(m,n) in item.room_image" :key="n" v-if="n<1"/>
				<view class="store-info">
					<view class="text-bold ellipsis-2 m-b-10 name">{{item.room_name}}</view>
					<view class="flex m-b-10">
						<view class="m-r-10"
							v-for="(tag,tagindex) in item.room_label" 
							:key="tagindex"
							:class="{'tags1': tagindex % 2 === 0, 'tags2': tagindex % 2 !== 0}"
						>
							{{tag}}
						</view>
					</view>
					<view class="flex-between">
						<view class="make">立即预约</view>
					</view>
				</view>
			</view>
		</view>
		<emptyData :width="empty.width" :height="empty.height" :text="empty.text" :icon="empty.icon" :marginTop="empty.marginTop" v-if="list.length == 0"></emptyData>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				StatusBar: getApp().globalData.StatusBar,
				page: 1,
				list: [],
				empty: {
					width: 135,
					height: 134,
					text: '暂无数据',
					icon: '/image/emptyAddress.png',
					marginTop: 100
				},
			}
		},
		onLoad(e) {
			this.getList();
		},
		onReachBottom() {
		  this.page++
		  this.getList()
		},
		methods: {
			goDetail(item) {
				this.$util.redirectTo('/otherpages/food/businessDetail?id='+item.room_id)
			},
			getList() {
			  this.$api.sendRequest({
			      url: "/api/food/roomlists",
			      data: {
			        page: this.page,
					page_size: 20,
			      },
			      success: res => {
			        if(res.code == 0) {
						if(this.page == 1) this.list = []
						this.list = [...this.list, ...res.data.list]

						this.list.forEach(item => {
							if(item.room_label) {
								// 判断里面是否有逗号，如果有就分割成数组
								if(item.room_label.indexOf(',') != -1) item.room_label = item.room_label.split(',')
								else item.room_label = [item.room_label]
							}else item.room_label = []
							if(item.room_image) item.room_image = item.room_image.split(',')
						});
			        } 
			      }
			    })
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $color-title2;
	}
</style>
<style lang="scss" scoped>
// 顶部
.title {
  position: relative;
  margin: 0 24rpx 0;
  .icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 261rpx;
    height: 178rpx;
  }
}
.store-list {
	margin-top: 36rpx;
	.store-item {
		position: relative;
		margin: 24rpx 24rpx 0;
		padding: 24rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		
		.store-image {
			width: 176rpx;
			height: 176rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}
		
		.store-info {
			width: 64%;
		}
		
		.name {
			height: 78rpx;
			line-height: 1.4;
		}
		
		.tags1 {
			font-size: 20rpx;
			color: #00B867;
			border-radius: 10rpx;
			background: #E6FAF1;
			padding: 0 10rpx;
			margin-right: 10rpx;
		}
		.tags2 {
			font-size: 20rpx;
			color: #0C7EFF;
			border-radius: 10rpx;
			background: #E6F2FF;
			padding: 0 10rpx;
		}
		
	}
	.make {
		width: 139rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		background-color: $color-title2;
		color: #fff;
		font-size: 24rpx;
		border-radius: 60rpx;
		margin-left: auto;
	}
}
</style>
